<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <h2>商品列表</h2>
    <div v-for="item in goodsList" :key="item.id">
        <h3>{{item.goodsName}}</h3>
        <p>商品价格: {{item.goodsPrice | currency}}</p>
        <p>库存数量:{{item.storeNum}}</p>
        <p>上架时间:{{item.addTime | date}}</p>
        <button @click="joinCart(item.goodsId)">加入购物车</button>
        <hr/>
    </div>
    <h3 v-if="cartList.length===0">购物车空空如也...</h3>
    <template v-else>
        <h2>购物车列表</h2>
        <p>合计：{{sumPrice | currency}}</p>
        <div v-for="item in cartList" :key="item.id">
            <h3>{{item.goodsName}}</h3>
            <p>商品价格：{{item.goodsPrice | currency}}</p>
            <p>购买数量：<button>-</button>{{item.buyNum}}<button>+</button></p>
            <p>小计：{{item.goodsPrice*item.buyNum | currency}}</p>
            <hr/>
        </div>
        <p>合计：{{sumPrice | currency}}</p>
    </template>
</div>
</body>
<script type="module">
    import filters from "./vueFilters.js"
    new Vue({
        el:"#root",
        data:{
            cartList:[],
            goodsList:[
                {
                    goodsId:1,
                    goodsName:"电脑",
                    goodsPrice:12345,
                    storeNum:10,
                    addTime:Date.now()-999999999
                },
                {
                    goodsId:2,
                    goodsName:"手机",
                    goodsPrice:8888,
                    storeNum:5,
                    addTime:Date.now()-88888888
                }
            ]
        },
        computed:{
            sumPrice(){
                return this.cartList.reduce(function(sum,item){
                    sum+= item.buyNum*item.goodsPrice;
                    return sum;
                },0)
            }
        },
        methods:{
            joinCart(goodsId){
                // 1- 根据商品id找到商品
                const goodsInfo = this.goodsList.find(v=>v.goodsId === goodsId);
                // 2- 判断是否库存充足
                if(goodsInfo.storeNum>0){
                    // 库存减1
                    goodsInfo.storeNum--;
                    // 根据商品ID获取到该购物车中的该商品信息;[{id,goodsName,goodsPrice,buyNum}]
                    const cartInfo = this.cartList.find(v=>v.goodsId === goodsId);
                    if(cartInfo){
                        // 有：商品购买数量+1
                        cartInfo.buyNum++;
                    }else{
                        const {id,goodsPrice,goodsName} = goodsInfo;
                        this.cartList.unshift({
                            goodsId,
                            goodsPrice,
                            goodsName,
                            buyNum:1
                        })
                    }
                }else{
                    // 2-2- 不足：给予库存不足的提示
                    alert("库存不足！不允许购买")
                }
            }
        },
        filters
    })
</script>
</html>